サインインの効率化：フロントエンドCredential Management APIの徹底解説

            async function signInUser() {
  try {
    const cred = await navigator.credentials.get({
      password: true,
      mediation: 'optional' // or 'silent' for auto-login
    });

    if (cred) {
      // A credential object was returned
      // Send it to the server for verification
      await serverLogin(cred);
    } else {
      // User cancelled the prompt or no credentials available
      // Fallback to manual form entry
    }
  } catch (e) {
    console.error('Error getting credential:', e);
  }
}
            

              
                Copy
              
            
          

            async function handleRegistration(form) {
  // 1. Submit form data to your server
  const response = await serverRegister(form);

  // 2. If registration is successful, create a credential object
  if (response.ok) {
    const newCredential = new PasswordCredential({
      id: form.username.value,
      password: form.password.value,
      name: form.displayName.value,
      iconURL: 'https://example.com/path/to/icon.png'
    });

    // 3. Ask the browser to store it
    try {
      await navigator.credentials.store(newCredential);
      console.log('Credential stored successfully!');
    } catch (e) {
      console.error('Error storing credential:', e);
    }
  }
}
            

              
                Copy
              
            
          

            async function handleSignOut() {
  // 1. Invalidate the session on your server
  await serverLogout();

  // 2. Prevent silent re-login on the client
  if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    await navigator.credentials.preventSilentAccess();
  }

  // 3. Redirect to the homepage or sign-in page
  window.location.href = '/';
}
            

              
                Copy
              
            
          

            const isCredManApiSupported = ('credentials' in navigator);

if (isCredManApiSupported) {
  // Proceed with API-based flows
} else {
  // Fallback to traditional form logic
}
            

              
                Copy
              
            
          

            window.addEventListener('load', async () => {
  if (!isCredManApiSupported) return;

  try {
    const cred = await navigator.credentials.get({ 
      password: true, 
      mediation: 'silent' 
    });

    if (cred) {
      console.log('Silent sign-in successful. Verifying with server...');
      // Send the credential to your backend to validate and create a session
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: cred.id, password: cred.password })
      });

      if (response.ok) {
        // Update UI to reflect logged-in state
        updateUIAfterLogin();
      }
    }
    // If 'cred' is null, do nothing. The user will see the standard sign-in page.
  } catch (e) {
    console.info('Silent get() failed. This is expected if user is signed out.', e);
  }
});
            

              
                Copy
              
            
          

            const signInButton = document.getElementById('signin-button');

signInButton.addEventListener('click', async () => {
  if (!isCredManApiSupported) {
    // Let the traditional form submission handle it
    return;
  }

  try {
    const cred = await navigator.credentials.get({ 
      password: true, 
      mediation: 'optional' 
    });

    if (cred) {
      // User selected an account from the browser's account chooser
      document.getElementById('username').value = cred.id;
      document.getElementById('password').value = cred.password;
      // Programmatically submit the form or send via fetch
      document.getElementById('login-form').submit();
    } else {
      // User closed the account chooser. Let them type manually.
      console.log('User cancelled the sign-in prompt.');
    }
  } catch (e) {
    console.error('Error during user-initiated sign-in:', e);
  }
});
            

              
                Copy
              
            
          

            const registrationForm = document.getElementById('registration-form');

registrationForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Assume server-side registration is successful
  // ...server logic here...

  if (isCredManApiSupported) {
    const form = event.target;
    const cred = new PasswordCredential({
      id: form.username.value,
      password: form.password.value,
      name: form.fullName.value
    });

    try {
      await navigator.credentials.store(cred);
      // Now redirect to the user's dashboard
      window.location.href = '/dashboard';
    } catch (e) {
      console.warn('Credential could not be stored.', e);
      // Still redirect, as registration was successful
      window.location.href = '/dashboard';
    }
  } else {
    // For unsupported browsers, just redirect
    window.location.href = '/dashboard';
  }
});
            

              
                Copy
              
            
          

            const signOutButton = document.getElementById('signout-button');
signOutButton.addEventListener('click', async () => {
  // 1. Tell the server to end the session
  await fetch('/api/logout', { method: 'POST' });

  // 2. Prevent automatic sign-in on the next visit
  if (isCredManApiSupported) {
    try {
      await navigator.credentials.preventSilentAccess();
    } catch(e) {
       console.error("Could not prevent silent access.", e)
    }
  }
  
  // 3. Redirect the user
  window.location.href = '/signed-out';
});
            

              
                Copy
              
            
          

            async function federatedSignIn() {
  try {
    const fedCred = await navigator.credentials.get({
      federated: {
        providers: ['https://accounts.google.com', 'https://www.facebook.com'],
        // You can also include OpenID Connect parameters
        // protocols: ['openidconnect'],
        // clientId: 'your-client-id.apps.googleusercontent.com'
      }
    });

    if (fedCred) {
      // fedCred.id contains the user's unique ID from the provider
      // fedCred.provider contains the origin of the provider (e.g., 'https://accounts.google.com')
      // Send this token/ID to your backend to verify and create a session
      await serverFederatedLogin(fedCred.id, fedCred.provider);
    }
  } catch (e) {
    console.error('Federated sign-in failed:', e);
  }
}
            

              
                Copy
              
            
          

            // 1. Get a challenge from your server
const challenge = await fetch('/api/webauthn/register-challenge').then(r => r.json());

// 2. Use navigator.credentials.create() with publicKey options
const newPublicKeyCred = await navigator.credentials.create({
  publicKey: challenge
});

// 3. Send the new credential back to the server for verification and storage
await fetch('/api/webauthn/register-verify', {
  method: 'POST',
  body: JSON.stringify(newPublicKeyCred)
});
            

              
                Copy